<template>
	<view>
		<view style="height: 321rpx;padding:82rpx 30rpx 0; border-radius: 0 0 40rpx 40rpx;background-color: #FFD333;">
			<view style="color: #1A222B; margin-bottom: 41rpx;display: flex;align-items: center;">
				<image src="/static/shequ/fh.png" style="margin-right: 21rpx; width: 18rpx;height: 32rpx;" mode="aspectFit" @click="fh"></image>
				<text style="font-size: 32rpx;margin-right: 380rpx;">美食</text>
				<image src="/static/meishi/椭圆%202@2x.png" style="width: 23rpx;height: 25rpx;" mode="aspectFit"></image>
				<text style="font-size: 24rpx;margin: 0 18rpx 0 9rpx;">李家沱地铁站</text>
				<image src="/static/meishi/返回@2x(1).png" style="width: 10rpx;height: 17rpx;" mode="aspectFit"></image>
			</view>
			<view style="position: relative;">
				<image src="/static/index/搜索@2x.png" style="width: 24rpx;height: 24rpx;position: absolute;top: 25rpx;left: 20rpx;" mode="aspectFit"></image>
				<input
					type="text"
					value=""
					placeholder-style="font-size:24rpx;color:#9EA9B7;"
					placeholder="请输入商品名称"
					style="padding-left: 64rpx; width: 630rpx;height: 72rpx;background-color: #F4F4F4;border-radius: 15rpx;"
				/>
			</view>

			<view class="banner-swiper screen-swiper square-dot">
				<view style="margin: 40rpx 20rpx 0;">
					<swiper indicator-dots="true" indicator-color="#CBCCCE" indicator-active-color="#fff" :autoplay="false" interval="" duration="">
						<swiper-item v-for="(item, index) in 3" :key="index">
							<view><image src="" style="width: 710rpx;height: 232rpx;background-color: #FBB792;border-radius: 10rpx;" mode="aspectFill"></image></view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view>
			<uni-grid :column="4" :showBorder="false">
				<uni-grid-item v-for="(item, index) in ms1" style="margin-top: 160rpx;">
					<view style="display: flex; flex-direction: column; align-items: center;">
						<image :src="`${item.icon}`" mode="aspectFit" style="width: 97rpx; height: 98rpx;"></image>
						<text style="color: #666666;font-size: 22rpx;margin-top: 5rpx;">{{ item.title }}</text>
					</view>
				</uni-grid-item>
				<uni-grid-item v-for="(item, index) in ms2" style="margin-top: -20rpx;">
					<view style="display: flex; flex-direction: column; align-items: center;">
						<image :src="`${item.icon}`" mode="aspectFit" style="width: 97rpx; height: 98rpx;"></image>
						<text style="color: #666666;font-size: 22rpx;margin-top: 5rpx;">{{ item.title }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<!-- 会员 -->
		<view style="margin: 30rpx 30rpx;display: flex;justify-content: space-between;">
			<navigator url="/pages/kaitong/kaitong"><image src="/static/meishi/组%2020@2x.png" style="width: 338rpx;height: 143rpx;" mode="aspectFill"></image></navigator>
			<navigator url="/pages/cz/cz"><image src="/static/meishi/组%2018@2x.png" style="width: 338rpx;height: 143rpx;" mode="aspectFill"></image></navigator>
		</view>
		<view style="height: 20rpx;background-color: #f7f7f7;"></view>
		<view>
			<view class="horizonal-tab">
				<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
					<block v-for="(item, index) in contentList" :key="index + 2">
						<view class="scroll-tab-item" :class="{ active: tabIndex == index }" @tap="toggleTab(index)">
							{{ item }}
							<view class="select"></view>
						</view>
					</block>
				</scroll-view>
			</view>
			<!-- 内容区 -->
			<view class="content" v-if="tabIndex == 0">
				<!-- 滑块视图 -->
				<scroll-view :scroll-y="true" style="margin-bottom: 50rpx; ">
					<view v-for="(item,index) in 2" :key="index" @click="toPage"
						style="margin-bottom: 30rpx;  display: flex;flex-wrap: nowrap;box-sizing: border-box; width: 690rpx;height: 252rpx;padding: 20rpx 0 18rpx 20rpx;box-shadow: 0 0 5rpx 1rpx #f1f1f1; border-radius: 14rpx;margin: 0 30rpx;"
					>
						<image src="" style="background-color: #707895; width: 206rpx;height: 206rpx;border-radius: 14rpx;" mode="aspectFill"></image>
						<view style="margin-left: 18rpx;margin-top: -8rpx;">
							<text class="title">藤椒抄手藤椒抄手藤椒抄手藤椒抄手藤椒抄手</text>
							<view style="display: flex;align-items: center;margin-top: 10rpx; flex-wrap: nowrap;font-size: 22rpx;color: #FF6F00;">
								<text style="margin-right: 5rpx;">4.9分</text>
								<uni-rate @change="onChange" v-model="value" :value="5" :size="12" color="#ADC3D0" activeColor="#FF6F00"></uni-rate>
								<text style="color: #666666;font-size: 22rpx;margin-left: 158rpx;">3.2km</text>
							</view>
							<view style="font-size: 22rpx;color: #666666;margin-top: 5rpx;">
								<text>四川老火锅</text>
								<text style="margin: 0 70rpx 21rpx 10rpx;">青羊万达</text>
							</view>
							<view style="font-size: 22rpx;color: #666666;margin-top: 20rpx;">
								<text style="width: 24rpx;height: 24rpx;background-color: #2E9BFF;font-size: 20rpx;color: #fff;border-radius: 4rpx; padding: 0 4rpx;">惠</text>
								<text style="margin: 0 10rpx 0 6rpx;">¥158</text>
								<text>双人套餐美蛙鱼头</text>
								<view style="margin-top: 10rpx;">
									<text
										style="margin-right: 6rpx; width: 24rpx;height: 24rpx;background-color: #FF6F00;font-size: 20rpx;color: #fff;border-radius: 4rpx; padding: 0 4rpx;"
									>
										惠
									</text>
									<text>100代50元</text>
								</view>
							</view>
						</view>
					</view>
				
				
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabIndex: 0 /* 选中标签栏的序列,默认显示第一个 */,
			contentList: ['附近推荐', '猜你喜欢', '超市', '水果', '买菜', '医药'],

			current: 0,
			ms1: [
				{ icon: 'http://sxk.scztf.com/waimai_go/app_static/fastfood@2x.png', title: '甜品' },
				{ icon: 'http://sxk.scztf.com/waimai_go/app_static/cooking@2x.png', title: '高汤' },
				{ icon: 'http://sxk.scztf.com/waimai_go/app_static/cherry@2x.png', title: '水果' },
				{ icon: 'http://sxk.scztf.com/waimai_go/app_static/spaghetti@2x.png', title: '拉面' }
			],
			ms2: [
				{ icon: 'http://sxk.scztf.com/waimai_go/app_static/burger@2x.png', title: '汉堡' },
				{ icon: 'http://sxk.scztf.com/waimai_go/app_static/turkey@2x.png', title: '肉类' },
				{ icon: 'http://sxk.scztf.com/waimai_go/app_static/cocktail@2x.png', title: '饮料' },
				{ icon: 'http://sxk.scztf.com/waimai_go/app_static/pizza@2x.png', title: '披萨' }
			],
			value: 4.5
		};
	},
	methods: {
		toPage(){
			uni.navigateTo({
				url:'/pages/msxq/msxq'
			})
		},
		change(e) {
			this.current = e.detail.current;
		},
		toggleTab(index) {
			this.tabIndex = index;
		},
		fh() {
			uni.navigateBack({
			    delta: 1,
			    animationType: 'pop-out',
			    animationDuration: 200
			});
		}
	}
};
</script>

<style lang="scss">
//设置轮播的指示点大小
.banner-swiper {
	/deep/ .uni-swiper-dots {
		// 指示点整个区域
		bottom: 100rpx;
	}
	/deep/ .uni-swiper-dot {
		// 指示点元素默认样式
		width: 20rpx !important;
		height: 4rpx !important;
		border-radius: 2rpx;
	}
}
.select {
	display: none;
	width: 40rpx;
	height: 6rpx;
	background-color: #ffd333;
	margin-left: 40rpx;
}
.horizonal-tab {
	font-size: 28rpx;
	color: #b4b4b4;
}
.horizonal-tab .active {
	color: #1b1b1b;
	font-size: 32rpx;
	.select {
		display: block;
		margin-top: -10rpx;
	}
}
.scroll-tab {
	white-space: nowrap; /* 必要，导航栏才能横向*/
	cursor: pointer;
	height: 140rpx;
	line-height: 100rpx;
	overflow-x: scroll;
}
.scroll-tab-item {
	display: inline-block; /* 必要，导航栏才能横向*/
	margin: 0 10rpx 49rpx 30rpx;
}
.title {
	width: 388rpx;
	font-size: 30rpx;
	font-weight: bold;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}
</style>
